<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">
        <p>v-for的使用：循环生成结构相同内容不同的dom节点，可以循环数组、数字（正整数）、对象、字符串</p>
        <p v-for="(item,index) in hobby" v-bind:key="index">{{index+1}}. {{item}}</p>
        <hr>
        <span v-for="(goods,num) in list" :key="num+'goods'">{{num+1}}-{{goods.name}}</span>
        <hr>
        <!-- 分页，循环正整数,序号从1开始 -->
        <button v-for="num in pages">第{{num}}页</button>
        <hr>
        <!-- 循环对象时，参数的位置是固定的，第一个位置是属性值，第二个是属性名，第三个是下标 -->
        <p v-for="(val, key, index) in obj1">{{index+1}}. {{key}}-{{val}}</p>
        <hr>
        <div v-for="a in str1">{{a}}</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#div',
            data: {
                hobby: ['唱','跳','rap','打篮球'],
                list: [
                    {name: '手机', price: 4000, num: 3},
                    {name: '电脑', price: 6000, num: 1},
                    {name: '平板', price: 2000, num: 5},
                ],
                // 总页数
                pages: 5,
                obj1: {
                    name: 'Tony',
                    age: 18,
                    sex: 'nan',
                    job: 'family'
                },
                str1: 'henghengheng'
            }
        })
    </script>
</body>
</html>